<template>
	<div class="detail">
		<div class="main">
			<el-row>
				<el-col :span="3">
					<div class="grid-content grid-flex">
						<i class="el-icon-back icon-left" @click="goBack"></i>
					</div>
				</el-col>
				<el-col :span="3" :offset="18">
					<div class="grid-content grid-flex">
						<i class="el-icon-s-operation icon-left"></i>
					</div>
				</el-col>
			</el-row>
			<div class="d-title">
				<div class="block">
					<el-image :src="src">
						<div slot="placeholder" class="image-slot">
							加载中<span class="dot">...</span>
						</div>
					</el-image>
				</div>
				<div class="card">
					<div class="name">
						<span>カウボーイビバップ</span>
						<span>星际牛仔</span>
					</div>
					<div class="rate">9.8</div>
				</div>
			</div>
		</div>
		<div class="tag grid-padd">
			<h4>标签</h4>
			<div>
				<el-tag>星际牛仔</el-tag>
				<el-tag type="success">经典</el-tag>
				<el-tag type="info">科幻</el-tag>
				<el-tag type="warning">神作</el-tag>
				<el-tag type="danger">神配乐</el-tag>
				<el-tag type="info">cowboy</el-tag>
				<el-tag type="danger">三寺宏一</el-tag>
				<el-tag type="">原创</el-tag>
				<el-tag type="success">渡边信一郎</el-tag>
				<el-tag type="warning">1998</el-tag>
			</div>
		</div>
		<div class="content grid-padd">
			<h4>简介</h4>
			<div :class="['brief-introduction', { 'over-hidden': !unfold }]" ref="textBox">
				<span ref="spanBox" v-html="content"></span>
			</div>
			<div class="btn" v-if="ifOver" @click="unfold = !unfold">
				<i :class="unfold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
			</div>
		</div>
		<div class="infobox grid-padd">
			<h4>详情</h4>
			<el-collapse-transition>
			<ul id="infobox" v-show="show3">
				<li><span class="tip">中文名: </span>星际牛仔</li>
				<li><span class="tip">话数: </span>26</li>
				<li><span class="tip">放送开始: </span>1998年10月23日</li>
				<li><span class="tip">放送星期: </span>星期五</li>
				<li><span class="tip">原作: </span><a href="/person/99" class="l">矢立肇</a></li>
				<li><span class="tip">导演: </span><a href="/person/100" class="l" title="渡边信一郎" rel="v:directedBy">渡辺信一郎</a></li>
				<li><span class="tip">脚本: </span><a href="/person/100" class="l" title="渡边信一郎">渡辺信一郎</a>、<a href="/person/11555" class="l" title="稻荷昭彦">稲荷昭彦</a>、<a href="/person/337" class="l">横手美智子</a>、<a href="/person/103" class="l">信本敬子</a>、<a href="/person/226" class="l" title="村井贞之">村井さだゆき</a>、<a href="/person/921" class="l">佐藤大</a>、<a href="/person/49" class="l">山口亮太</a></li>
				<li><span class="tip">分镜: </span><a href="/person/100" class="l" title="渡边信一郎">渡辺信一郎</a>、<a href="/person/522" class="l" title="本乡满">本郷みつる</a>、<a href="/person/2598" class="l" title="饭田马之介">飯田馬之介</a>、<a href="/person/1443" class="l">都留稔幸</a>、<a href="/person/801" class="l">山内重保</a>、<a href="/person/1742" class="l">森邦宏</a>、<a href="/person/560" class="l" title="赤根和树">赤根和樹</a>、<a href="/person/456" class="l" title="佐藤顺一">佐藤順一</a>、<a href="/person/3338" class="l">武井良幸</a>、<a href="/person/343" class="l">山口祐司</a>、<a href="/person/12491" class="l">佐藤育郎</a>、<a href="/person/920" class="l" title="冈村天斋">岡村天斎</a></li>
				<li><span class="tip">演出: </span><a href="/person/12284" class="l">山田弘和</a>、<a href="/person/1742" class="l">森邦宏</a>、<a href="/person/3338" class="l">武井良幸</a>、<a href="/person/12491" class="l">佐藤育郎</a>、<a href="/person/1373" class="l" title="渡边哲哉">渡邊哲哉</a></li>
				<li><span class="tip">音乐: </span><a href="/person/6766" class="l" title="THE SEATBELTS">シートベルツ</a>、<a href="/person/101" class="l" title="菅野洋子">菅野よう子</a></li>
				<li><span class="tip">人物设定: </span><a href="/person/102" class="l">川元利浩</a></li>
				<li><span class="tip">分镜构图: </span><a href="/person/224" class="l">入江泰浩</a></li>
				<li><span class="tip">系列构成: </span><a href="/person/103" class="l">信本敬子</a></li>
				<li><span class="tip">色彩设计: </span><a href="/person/562" class="l" title="中山志甫子">中山しほ子</a></li>
				<li><span class="tip">作画监督: </span><a href="/person/12502" class="l" title="新保卓郎">しんぼたくろう</a>、<a href="/person/11569" class="l" title="中田荣治">中田栄治</a>、<a href="/person/287" class="l" title="本桥秀之">本橋秀之</a>、<a href="/person/3650" class="l" title="菅野宏纪">菅野宏紀</a>、<a href="/person/1380" class="l">逢坂浩司</a>、<a href="/person/520" class="l">小森高博</a>、<a href="/person/3279" class="l">竹内浩志</a>、<a href="/person/102" class="l">川元利浩</a>、<a href="/person/11371" class="l" title="后藤雅巳">後藤雅巳</a>、<a href="/person/369" class="l">佐野浩敏</a></li>
				<li><span class="tip">机械设定: </span><a href="/person/9238" class="l">山根公利</a></li>
				<li><span class="tip">摄影监督: </span><a href="/person/104" class="l">大神洋一</a></li>
				<li><span class="tip">主题歌编曲: </span><a href="/person/101" class="l" title="菅野洋子">菅野よう子</a></li>
				<li><span class="tip">主题歌作曲: </span><a href="/person/101" class="l" title="菅野洋子">菅野よう子</a></li>
				<li><span class="tip">主题歌演出: </span><a href="/person/13950" class="l">山根麻以</a></li>
				<li><span class="tip">企画: </span><a href="/person/189" class="l" title="日升">サンライズ</a></li>
				<li><span class="tip">制作管理: </span><a href="/person/19297" class="l" title="鸟羽聪">鳥羽聡</a></li>
				<li><span class="tip">设定: </span><a href="/person/19297" class="l" title="鸟羽聪">鳥羽聡</a>、<a href="/person/253" class="l">河森正治</a>、<a href="/person/921" class="l">佐藤大</a></li>
				<li><span class="tip">音响监督: </span><a href="/person/17" class="l">小林克良</a></li>
				<li><span class="tip">特效: </span><a href="/person/19295" class="l" title="长谷川敏生">長谷川敏生</a></li>
				<li><span class="tip">制片人: </span><a href="/person/3113" class="l">南雅彦</a></li>
				<li><span class="tip">制作助手: </span><a href="/person/44" class="l">BONES</a></li>
				<li><span class="tip">动画制作: </span><a href="/person/189" class="l" title="日升">サンライズ</a></li>
				<li><span class="tip">别名: </span>Cowboy Bebop</li>
				<li><span class="tip" style="visibility:hidden;">别名: </span>宇宙牛仔</li>
				<li><span class="tip" style="visibility:hidden;">别名: </span>赏金猎人</li>
				<li><span class="tip" style="visibility:hidden;">别名: </span>太空牛仔</li>
				<li><span class="tip" style="visibility:hidden;">别名: </span>恶男杰特</li>
				<li><span class="tip">官方网站: </span>http://www.cowboybebop.org/；http://www.cowboy-bebop.net/index.html</li>
				<li><span class="tip">播放电视台: </span>WOWOW、テレビ東京</li>
				<li><span class="tip">播放结束: </span>1999年4月23日</li>
				<li><span class="tip">テレビ東京版: </span>1998年4月3日 - 1998年6月26日</li>
				<li><span class="tip" style="visibility:hidden;">テレビ東京版: </span>全12话+总集篇</li>
			</ul>
			</el-collapse-transition>
			<div class="btn" @click="show3 = !show3">
				<i :class="show3 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
			</div>
		</div>
		<div class="role grid-padd">
			<!-- <h4>角色</h4> -->
			<!-- <el-carousel :interval="8000" indicator-position="outside" height="100px" ref="carousel">
				<el-carousel-item v-for="(item,index) in banner" :key="item.url" ref="carouselitem">
					<v-touch :swipe-options="{direction: 'horizontal'}" v-on:swipeleft="swiperleft(index)" v-on:swiperight="swiperright(index)" class="wrapper">
						<div class="menu-container" ref="menuContainer">   
							<img :src="item.url"/>
							<p>
								<span>主角：{{item.role}}</span>
								<span>cv：{{item.cv}}</span>
							</p>
						</div>
					</v-touch>
				</el-carousel-item>
			</el-carousel> -->
			<!-- <div class="role-box">
				<div v-for="(item,index) in banner" :key='index' class="role-item">
					<img :src="item.url" >
					<p>
						<span>主角：{{item.role}}</span>
						<span>cv：{{item.cv}}</span>
					</p>
				</div>
			</div> -->
		</div>
		<div class="comment grid-padd">
			<el-collapse v-model="activeNames">
				<el-collapse-item title="角色" name="1">
					<div class="role-box">
						<div v-for="(item,index) in banner" :key='index' class="role-item">
							<img :src="item.url" >
							<p>
								<span>主角：{{item.role}}</span>
								<span>cv：{{item.cv}}</span>
							</p>
						</div>
					</div>
				</el-collapse-item>
				<el-collapse-item title="评论" name="2">
					<!-- <h4>评论</h4> -->
					<div class="comment-inner">
						<div class="comment-item" v-for="(useritem,index) in arrs" :key='index'>
							<div class="avaUser">
								<img :src="useritem.img" >
							</div>
							<div class="text-main">
								<div class="text">
									<p class="user-name">{{useritem.user}}</p>
									<p class="send-time">
										<span class="date">{{useritem.time}}</span>
										<span>#{{useritem.num}}</span>
									</p>
									<p>{{useritem.comment}}</p>
								</div>
							</div>
						</div>
					</div>
				</el-collapse-item>
			</el-collapse>
			<!-- <h4>评论</h4>
			<div class="comment-inner">
				<div class="comment-item" v-for="(useritem,index) in comments" :key='index'>
					<div class="avaUser">
						<img :src="useritem.img" >
					</div>
					<div class="text-main">
						<div class="text">
							<p class="user-name">{{useritem.user}}</p>
							<p class="send-time">
								<span class="date">{{useritem.time}}</span>
								<span>#{{useritem.num}}</span>
							</p>
							<p>{{useritem.comment}}</p>
						</div>
					</div>
				</div>
			</div> -->
		</div>
		<div class="send">
			<input type="text" placeholder="我要评论" v-model="input"/>
			<button type="button">
				<span class="icon-send" @click="upcomment">
					<i class="el-icon-thumb"></i>
				</span>
			</button>
		</div>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="80%"
			:before-close="handleClose">
			<span>你还未登录，去登录</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default{
	name:'Detail',	
	data() {
		return {
			src: 'http://i0.letvimg.com/vrs/201307/23/4996b18ff4884471842b01402ddf9d66.jpg',
			ifOver: false, // 文本是否超出三行，默认否
			unfold: false ,// 文本是否是展开状态 默认为收起
			content:"&nbsp;&nbsp;&nbsp;&nbsp;2021年，随着超光速航行技术的实现，人类得以在太阳系范围内方便的自由移动，但是由于设计上的失误，这种技术引发了月球的爆炸，无数的月球碎片被吸引向地球，造成了空前绝后的大灾难。存活下来的人类逃离地球，并开始在太阳系各地建立家园。由于这次灾难，国家、政府等权利机构都极为不稳定、治安问题也成为了一个难题。为了在人力资源不足的情况下抓捕罪犯，有些组织开始允许个人抓捕通缉的罪犯并换取奖金，“赏金猎人”这个职业也就由此诞生了。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;史派克（Spike）和杰特（Jet）是驾驶飞船Bebop号在宇宙中以捉拿逃犯获取奖金为生的赏金猎人。两人在星际间的旅程中，结识了身负巨债、嗜财如命的美女菲（Faye）和电脑神童艾德（Ed），并收养了拥有高智商的数据狗爱因（Ein）。从此，四人一狗游荡在广阔之宇宙之中，在自己与他人的生活中经历著种种悲欢离合，也寻找著各自的过去。",
			show3: false,
			banner:[
				{url:'https://lain.bgm.tv/pic/crt/s/1a/e3/77_crt_r11wF.jpg?r=1489157445',role:'史派克·斯皮格尔',cv:'山寺宏一'},
				{url:'https://lain.bgm.tv/pic/crt/s/d4/e6/78_crt_VV28f.jpg',role:'杰特·布莱克',cv:'石塚運昇'},
				{url:'https://lain.bgm.tv/pic/crt/s/1a/e3/77_crt_r11wF.jpg?r=1489157445',role:'史派克·斯皮格尔',cv:'山寺宏一'},
				{url:'https://lain.bgm.tv/pic/crt/s/d4/e6/78_crt_VV28f.jpg',role:'杰特·布莱克',cv:'石塚運昇'},
				{url:'https://lain.bgm.tv/pic/crt/s/1a/e3/77_crt_r11wF.jpg?r=1489157445',role:'史派克·斯皮格尔',cv:'山寺宏一'},
				{url:'https://lain.bgm.tv/pic/crt/s/d4/e6/78_crt_VV28f.jpg',role:'杰特·布莱克',cv:'石塚運昇'},
			],
			comments:[
				{user:'温的不能变冰',img:'https://lain.bgm.tv/pic/user/s/icon.jpg',time:'2021-9-24 09:36',num:"1",comment:'配乐封神，把氛围营造的完美，虽然主线不明显不过每集质量都很高，配的上神作'},
				{user:'山风',img:require('../../assets/02.jpg'),time:'2021-9-24 09:36',num:"2",comment:'看完之后某些镜头的印象仍然很深，其风格令人着迷，结局也令人感慨。可惜作为公路片单元剧，部分集数的脚本表现确实一般，既没有对角色起到更多的塑造的作用，去掉也完全没有任何影响，有明显的凑集数感；ed和爱因，作为Bebop成员又实在有点跑龙套。但取其长处，可以给到9分，因为它足够独特。'}
			],
			arrs:[],
			activeNames: ['1'],
			input:'',
			// 确认框
			dialogVisible: false,
			userimg:require('../../assets/yashe.webp')
		}
	},
	mounted() {
		// 判断是否显示展开收起按钮
		this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight
	},
	methods: {
		// 返回上一级
		goBack(){
			if (window.history.length <= 1) {
				this.$router.push({ path: "/index" });
				return false;
			} else {
				this.$router.go(-1);
			}
		},
		handleChange(val) {
			console.log(val);
		},
		// 发表评论
		upcomment(){
			if(this.$store.state.user.name != null){
				// console.log(this.$store.state.user.user) 
				let len = this.comments.length;
				let date = new Date()
				let arr = {
					user:this.$store.state.user.name,
					img:this.userimg,
					time:this.timeFormat(date),
					num:len+1,
					comment:this.input
				};
				this.arrs.push(arr)
				this.addComment(arr)
				this.input='';
			}else{
				this.dialogVisible = true
			}
		},
		handleClose() {
			this.dialogVisible = false
		},
		sure(){
			this.$router.push({name:'Login'})
			this.dialogVisible = false
		},
		timeFormat(time) {
			let year = time.getFullYear();
			let month = time.getMonth() + 1 > 9 ? time.getMonth()+1 : '0'+(time.getMonth()+1);
			let day = time.getDate() > 10 ? time.getDate() : "0" + time.getDate();
			return year + "-" + month + "-" + day + " " + time.getHours() + ":" + time.getMinutes();	
		},
		addComment(val){
			const clist = JSON.parse(window.localStorage.getItem( "comments")) || [];
			clist.push(val);
			window.localStorage.setItem( "comments",JSON.stringify(clist));
		}
	},
	created() {
		const clist = JSON.parse(window.localStorage.getItem( "comments")) || [];
		this.arrs = [...this.comments,...clist]
	}
}
</script>

<style scoped>
	@import url("detail.css");
</style>
